<template>
  <div class="edit-chapter">
    <div class="demo-input-suffix">
      <span class="form-input-label">所属章节：</span>
      <el-input disabled v-model="data.chapter_path" ></el-input>
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label">编辑器：</span>
      <el-select v-model="data.detail_type" placeholder="请选择章节内容类型">
        <el-option
          v-for="item in chapter_detail_types"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label">所属章节：</span>
      <ckeditor v-if="data.detail_type == 'H'" :editor="editor" v-model="data.detail" :config="editorConfig"></ckeditor>
      <MarkdownPro v-if="data.detail_type == 'M'" v-model="data.detail" />
      <input v-if="data.detail_type == 'V'" type="file" @change="onFileChange" accept="video/*,.mkv" style="width:200px" id="video" />
      <video v-if="data.detail_type == 'V' && data.attach_url" controls width="250">
          <source :src="data.attach_url" type="video/webm">
          <source :src="data.attach_url" type="video/mp4">
          <source :src="data.attach_url" type="video/mov">
          <source :src="data.attach_url" type="video/wav">
          <source :src="data.attach_url" type="video/mkv">
          Sorry, your browser doesn't support embedded videos.
      </video>
    </div>
     <div class="footer">
      <el-button type="primary" @click="onSubmit">保 存</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { courseModel, _upload } from "@/api/admin_models";
import { Message } from "element-ui";
import editorMixin from '@/mixins/editorMixin.js';
import selects from '@/common/selects.js';
export default {
  mixins: [editorMixin],
  data() {
    return {
      id: null,
      data: {
        detail_type: 'H',
        attach_url: null,
      },
      chapter_detail_types: selects.chapter_detail_types
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getItem();
  },
  methods: {
    getItem() {
      courseModel.chapter(this.id, res => {
        this.data = res.data;
      });
    },
    onSubmit() {
      let d = this.data;
      if (
        !d.detail
      ) {
        return Message.warning("请填完整信息");
      }
      courseModel.chapterUpdate(this.id, {
        detail: this.data.detail,
        detail_type: this.data.detail_type
      }, res=>{
        Message.success(res.message)
        this.$router.go(-1)
      }, err => {
        Message.warning(err.message)
      })

    },
    onCancel() {
      this.$router.go(-1);
    },
    onFileChange(e) {
      console.log(e)
      console.log(e, _upload)
      if(e.target.files[0].size > 2 * 1024 * 1024 * 1024) {
        return Message.warning('上传视频不可超过2G');
      }
      let _this = this
      _upload(e.target.files[0], res => {
        console.log(res)
        _this.data.detail = res.data.id
        _this.data.attach_url = res.data.attach_url
        _this.$forceUpdate()
      }, err => {
        Message.warning('文件上传失败:' + err)
        console.log(err)
      })
    }
  }
};
</script>
<style scoped lang="scss">
  .edit-chapter{
    text-align: left;
  }
  .ck.ck-editor{
    width: 80%;
  }
  .footer{
    margin-top: 20px;
  }
</style>